<!--
 * @Descripttion : 
 * @Autor        : Lilong
 * @Date         : 2022-09-30 10:53:02
 * @LastEditTime : 2022-10-01 15:41:45
 * @FilePath     : \组件\插槽\简单插槽\APP.vue
-->
// src/APP.vue
/**
1、插槽内容为字符串
Error! Something bad happened.

2、插槽内容为HTML
Error!我是图标fa-plus Add todo

3、插槽内容为组件
Error!我是图标plus Add todo

4、注意：如果没有slot占位，组件标签中的内容将会被抛弃
<button class="btn-primary">create a new item</button>
*/

<template>
<div id="slots-demo" class="demo">
  <div>1、插槽内容为字符串</div>
  <alert-box>
    Something bad happened.
  </alert-box>

  <br>

  <div>2、插槽内容为HTML</div>
  <alert-box>
    <i class="fas fa-plus">我是图标fa-plus</i>
    Add todo
  </alert-box>

  <br>

  <div>3、插槽内容为组件</div>
  <alert-box>
    <font-awesome-icon name="plus"></font-awesome-icon>
    Add todo
  </alert-box>

  <br>

  <div>4、注意：如果没有slot占位，组件标签中的内容将会被抛弃</div>
  <todo-button>
    Add to do
  </todo-button>

</div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import AlertBox from './components/alert-box.vue'
import FontAwesomeIcon from './components/font-awesome-icon.vue'
import TodoButton from './components/todo-button.vue'

export default defineComponent({
  name:"APP",
  components: {
    AlertBox,
    FontAwesomeIcon,
    TodoButton
  }
})
</script>